<template>
  <div  id="myCarousel" class="carousel slide">
    <!-- 指示符 -->
    <ul class="carousel-indicators">
      <li  data-slide-to="0" class="active"></li>
      <li  data-slide-to="1"></li>
      <li  data-slide-to="2"></li>
    </ul>
    <!-- 轮播图片 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <a href='http://www.linrongtu.top/mysell'>
          <img class="img-responsive center-block" src="./myproject.jpg" alt="项目前景图">
          <div class="carousel-caption">
            <h3>Vue项目</h3>
            <p>第一个饿了么</p>
          </div>
        </a>
      </div>
      <div class="carousel-item">
        <a href="#">
          <img class="img-responsive center-block" src="./myproject.jpg" alt="项目前景图">
          <div class="carousel-caption">
            <h3>微信小程序</h3>
            <p>广油课表</p>
          </div>
        </a>
      </div>
      <div class="carousel-item">
        <a href="#">
          <img class="img-responsive center-block" src="./myproject.jpg" alt="项目前景图">
          <div class="carousel-caption">
            <h3>商用购物网站</h3>
            <p>喜购，一款高额优惠券网站</p>
          </div>
        </a>
      </div>
    </div>
    <!-- 左右切换按钮 -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev" aria-hidden="true">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only prev"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next" aria-hidden="true">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only next"></span>
    </a>
  </div>
</template>
<script>
export default {
  name: 'project'
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
#myCarousel
  margin-top: 20px
</style>
